<!DOCTYPE html>
<html>
<head>
	<title>网易</title>
	<meta charset = "UTF-8"/>
	<style type="text/css">
body{
	/*margin: 50px;*/
	width: 965px;
	font-family: verdana,sans-serif;
	font-size: 14px;
	margin: 0 auto;
}
	.bg{
		background-image: url('01.PNG');
		height: 80px;
	 }

	.links{
		font-family: verdana,sans-serif;
		font-size: 14px;
		font-weight: normal;
		margin-left: 810px;
		position: absolute;
		top: 84px;

		
	}
	.cender{
		background-color: #6495C6;
		height: 40px;
		width: 965px;
		margin-top: -10px;
	}

	h1{
		font-family: verdana,sans-serif;
		font-size: 14px;
		color: #fff;
		line-height: 40px; 
		font-weight: normal;
		margin-left: 30px;

	}
 
 	ul{
 		list-style: none;


 	}

 	li{
 		height: 30px;
 		width: 150px;
 		border: #b6b6b6 1px solid;
 		float: left;
 		text-align: center;
 		line-height: 30px;

 	}
 	.li_a{
 		background-color: #2d75bf;
 		color: #fff;

 	}
 	.li_b{
 		margin-left: -1px;
 	}
 	.li_c{
 		margin-left: -1px;
 	}

 	#abody{
 		width: 650px;
 		height: 800px;
 		border: #b6b6b6 1px solid;
 		margin-top:-14px;
 	}
 	#body{
 		margin-top: 180px;
 	}
/* 	.tit{
 		float: left;
 	}*/
 	em{
 		color: red;

 	}
	
	.tit{
		width: 600px;
		height: 700px;
		margin: 50px;		
	}
	p{
		color: #ababab;
		font-size: 10px;
		margin-left: 100px;
	}
	img{
		margin: -20px;
		margin-left: 40px;
	}
	.lian{
		margin-left: 440px;
	}
	.da{
		width: 300px;
		border-radius: 5px;
		height: 30px;
	}
	.anniu{
		width: 150px;
		height: 25px;
		margin-left: 100px;
	}
	.zhu{
		width: 120px;
		height: 40px;
		background-color: #5fb54b;
		color: #ffffff;
		font-size: 16px;
		margin-left: 100px;
	}

	#tupian{
		background-image: url('02.PNG');
		height: 800px;
		margin-left: 650px;
		margin-top: -802px;
		border: #b6b6b6 1px solid;
	 }
	 #footer{
	 	text-align: center;
	 	line-height: 26px;
	 }
	</style>

</head>

<body>
<div class="header">
	<div class="bg"><!-- <img src="01.PNG"> --></div>
	<div class="links">
		<a href="">了解更多</a>
		&nbsp;&nbsp;|&nbsp;&nbsp;
		<a href="">反馈意见</a>
	</div>
</div>

	<div class="cender">
		<h1>欢迎注册无限量的网易邮箱！邮件地址可以登录其他网易旗下产品。</h1>
	</div>
	<div id="mbody">
		<div class="mbody_ab">
			<ul>
				<li class="li_a">注册字母邮箱</li>
				<li class="li_b">注册手机号码邮箱</li>
				<li class="li_c">注册VIP邮箱</li>
			</ul>
		</div>
	</div>

	<div id="abody">
	<div class="tit"><br/><br/><br/>
		<tr>
			<td><em>*</em>邮件地址</td>&nbsp;&nbsp;&nbsp;
			<td><input type="text" name="" class="da"></td>
			<td>@ <select><option>136.com</option></select></td>
			<p>6~18个字符，可以使用字母、数字、下划线，须以字母开头</p>
		</tr><br/>
		<tr>
			<td><em>*</em>密码</td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<td><input type="text" name="" class="da"></td>
			<p>6~16个字符，区分大小写</p>
		</tr><br/>
		<tr>
			<td><em>*</em>确认密码</td>&nbsp;&nbsp;&nbsp;
			<td><input type="text" name="" class="da"></td>
			<p>再次填写密码</p>
		</tr><br/>
		<tr>
			<td><em>*</em>手机号码</td>&nbsp;&nbsp;&nbsp;
			<td><input type="text" name="" class="da" ></td>
			<p>忘记密码时，可以通过改手机号码快速找回密码</p>
		</tr><br/>
		<tr>
			<td><em>*</em>验证码</td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<td><input type="text" name="" class="da"></td><img src="03.png">
			<a href="" class="lian">看不清楚？换张图片</a>
			<p>请填写图中的字符，不区分大小写</p>
			<button class="anniu">免费获取验证码</button>
		</tr><br/><br/>
		<tr>
			<td><em>*</em>信息验证码</td>
			<td><input type="text" name="" class="da"></td>
			<p>请查收手机短信，并填写信息中的验证码</p>
		</tr><br/>
		<P><input type="checkbox" name="">同意<a href="">“服务条款”</a>和<a href="">“隐私权相关政策”</a></P>
		<button class="zhu">立即注册</button>
	</div>
	</div>
<div id="tupian"></div>

<div id="footer">
	<p>关于网易 关于网易免费邮 邮箱官方博客 客户服务 隐私政策 | 网易公司版权所有©1997-2017</p>
	<p>数据来源：艾媒咨询《2015-2018中国个人邮箱行业研究报告》</p>

</div>
</body>
</html>